<template>
  <div class="norent-box">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="快去发布房源吧~"
      slot="houseItem"
      v-if="houseList.length == 0"
    />
    <div v-else v-for="item of houseList" :key="item.id" class="houseItem-box">
      <house-item
        :houseItem="item"
        :imgPath="staticpath+item.images[0].path"
        @click.native="toHouseDetail(item.id)"
      >
        <span
          slot="state"
          class="stateSpan"
          :class="{green:item.isCheck == 1,yellow:item.isCheck == 2,red:item.isCheck == 3}"
        >{{item.isCheck | CheckState}}</span>
        <span slot="publicTime" class="publicTime-box">{{item.publishTime.substr(0,10)}}</span>
        <span slot="ishot" class="ishotSpan" v-if="item.isHot == 1">{{item.isHot | isHotState}}</span>
      </house-item>
      <div class="soldout-box-content">
        <div class="soldout-box" @click.stop="toUpDataHouseInfo(item.id)">点击修改</div>
        <div class="soldout-box" @click.stop="toRentOutHouse(item.id)">确认租出</div>
        <div class="soldout-box" @click.stop="toSoldOut(item.id)">点击下架</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryHouseState, soldOutHouse,rentOutHouse } from "network/rentstate";

import HouseItem from "components/common/houseitem/HouseItem";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      houseList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    toSoldOut(id) {
      let isShelf = 2;
      soldOutHouse({ id, isShelf }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$toast({
            message: "下架成功",
            position: "bottom",
          });
          this.toQueryHouseState()
        } else{
          this.$toast({
            message: "服务器错误,下架失败",
            position: "bottom",
          });
        }
      });
    },
    toQueryHouseState() {
      let userId = localStorage.getItem("userId");
      let code = 3;
      queryHouseState({ userId, code }).then((res) => {
        console.log(res);
        this.houseList = res.data;
      });
    },
    toUpDataHouseInfo(houseId){
      this.$router.push({
        path:'/updatahouseinfo',
        query:{
          houseId
        }
      })
    },
    toRentOutHouse(id){
      let isRent = 1
      rentOutHouse({id,isRent}).then(res => {
        console.log(res);
        if(res.code == 200){
          this.$toast({
            message:"确认出租",
            position:"bottom"
          })
          this.toQueryHouseState()
        }else {
          this.$toast({
            message:"修改失败",
            position:"bottom"
          })
        }
      })
    },
    toHouseDetail(houseId){
      this.$router.push('/housedetail?houseId='+houseId)
    }
  },
  activated() {
    this.toQueryHouseState()
  },
  filters: {
    CheckState(val) {
      return val == "1" ? "审核通过" : val == "2" ? "未审核" : "审核未通过";
    },
    isHotState(val) {
      return val == 1 ? "热门" : "";
    },
  },
};
</script>

<style scoped>
.norent-box {
  padding-bottom: 50px;
  /* height: 100%; */
}
.stateSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
}
.ishotSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: rgb(236, 236, 58);
}
.red {
  background-color: red;
}
.publicTime-box {
  font-size: 12px;
  color: #666;
}
.houseItem-box {
  border-bottom: 5px solid #eee;
}
.soldout-box-content {
  display: flex;
  justify-content: flex-end;
}
.soldout-box {
  font-size: 13px;
  margin: 8px 15px 8px 0px;
  height: 25px;
  width: 60px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #ccc;
}
</style>